<template>
  <div class="box">
    <header class="header">
      <ul>
        <li class="hover">关注</li>
        <li @click="community">社区</li>
        <li @click="products">优品</li>
      </ul>
    </header>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    community () {
      this.$router.push('/community')
    },
    products () {
      this.$router.push('/products')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
header {
  height: 0.46rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    @include justify-content();
    @include align-items();
    li {
      width: 0.94rem;
      height: 0.24rem;
      text-align: center;
    }
    .hover {
      @include background-color(#F8F8F8);
      color: #EF98A9;
    }
  }
}

</style>
